/* @flow */

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Button,
  Image,
} from 'react-native';

import {addNavigationHelpers, StackNavigator, DrawerNavigator, TabNavigator, NavigationActions} from 'react-navigation';

import { connect } from 'react-redux';
import {testAction} from '../ReduxComponent/actions/AppActions'

import ServerTabScreen from './TabScreen/ServerTabScreen';
import ICSTabScreen    from './TabScreen/ICSTabScreen';
import HospitalTabScreen from './TabScreen/HospitalTabScreen';
// import ReportTabScreen   from './TabScreen/ReportTabScreen';
import SettingTabScreen  from './TabScreen/SettingTabScreen';
import MoreTable from '../src/ReportPage/MoreTable'
import TestView from '../src/Table/TestView'
import ReportPage from '../src/ReportPage/ReportPage'
import SingleTable from '../src/Table/ReportSingleDetail.js'

const MainCloudAlarmScreen = TabNavigator({
  Server:{
    screen:ServerTabScreen,
    navigationOptions:{
      headerTitle:'服务器警告',
      headerTintColor:'#BD10E0',
      title:'服务器',
      headerStyle:{
        backgroundColor:'redrgb(255, 255, 255)',
      },
      tabBarIcon: ({focused,tintColor}) => (
        <Image
          resizeMode='cover'
          source={focused?require('../img/tabIcon/icon_tab_home_press.png'):require('../img/tabIcon/icon_tab_home.png')}
          style={[styles.tabIcon]}
        />

      ),

    },
    initialRouteParams:{
      screenModalVisible:false,
      rankModalVisible:false,
    }
    // state:{
    //   params:{
    //     screenModalVisible:false,
    //     rankModalVisible:false,
    //   }
    // },
  },
  ICS   :{
    screen:ICSTabScreen,
    navigationOptions:{
      headerTitle:'ICS错误信息',
      headerTintColor:'#BD10E0',
      title:'ICS',
      headerStyle:{
        backgroundColor:'redrgb(255, 255, 255)',
      },
      headerTitleStyle:{
        alignSelf: 'center',
      },
      tabBarIcon:({focused})=>(
        <Image
          resizeMode='cover'
          source={focused?require('../img/tabIcon/icon_tab_ics_press.png'):require('../img/tabIcon/icon_tab_ics.png')}
          style={[styles.tabIcon]}
        />
      ),
    }

  },
  Hospital:{
    screen:HospitalTabScreen,
    navigationOptions:{
      headerTitle:'医院信息',
      headerTintColor:'#BD10E0',
      title:'医院',
      headerStyle:{
        backgroundColor:'redrgb(255, 255, 255)',
      },
      tabBarIcon:({focused})=>(
        <Image
          resizeMode='cover'
          source={focused?require('../img/tabIcon/icon_tab_hospital_press.png'):require('../img/tabIcon/icon_tab_hospital.png')}
          style={[styles.tabIcon]}
        />
      ),
    },

  },
  Report:{
    screen:ReportPage,
    navigationOptions:{
      headerTitle:'报表分析',
      headerTintColor:'#BD10E0',
      title:'报表',
      headerStyle:{
        backgroundColor:'redrgb(255, 255, 255)',
      },
      tabBarIcon:({focused})=>(
        <Image
          resizeMode='cover'
          source={focused?require('../img/tabIcon/icon_tab_report_press.png'):require('../img/tabIcon/icon_tab_report.png')}
          style={[styles.tabIcon]}
        />
      ),
    },

  },

  Setting:{
    screen:SettingTabScreen,
    navigationOptions:{
      headerTitle:'个人信息',
      headerTintColor:'#BD10E0',
      title:'设置',
      headerStyle:{
        backgroundColor:'redrgb(255, 255, 255)',
      },
      tabBarIcon:({focused})=>(
        <Image
          resizeMode='cover'
          source={focused?require('../img/tabIcon/icon_tab_setting_press.png'):require('../img/tabIcon/icon_tab_setting.png')}
          style={[styles.tabIcon]}
        />
      ),
    },

  },

},

  {
    initialRouteName:'Server',
    initialRouteParams:{
      name: '',
    },
    tabBarOptions:{
      activeTintColor:'#BD10E0',
      inactiveTintColor:'gray',
      activeBackgroundColor:'transparent',
      inactiveBackgroundColor:'transparent',
      showLabel:true,
      showIcon:true,
      scrollEnable:true,
      upperCaseLabel:false,
      pressColor:'rgb(101, 78, 237)',//按压时的颜色
      style:{
        backgroundColor:'rgb(255, 255, 255)',
        height:49,
      },
      indicatorStyle:{
        height:0,
      },
      tabStyle:{
        // backgroundColor:'rgb(43, 117, 193)',
      },
      iconStyle:{
        // backgroundColor:'red',
        marginTop:-3,
      },
      labelStyle:{
        // backgroundColor:'rgb(135, 111, 232)',
        marginTop:4,
        fontSize:10,
      }
    },

    tabBarVisible:true,
    swipeEnable :true,
    tabBarPosition:'bottom',
    animationEnabled:true,
    lazy:true,
    backBehavior:'none',





  },
  //下边是设置tab的一些信息



);


const NaviApp = StackNavigator({
  HomeScene:{
    screen:MainCloudAlarmScreen
  },
  Server:{
    screen:ServerTabScreen,
  },
  ICS:{
    screen:ICSTabScreen,
  },
  Hospital:{
    screen:HospitalTabScreen,
  },
  Setting:{
    screen:SettingTabScreen,
  },
  Test:{
    screen:TestView,
  },
  MoreTable: {
      screen: MoreTable,
  },
  SingleTable: {
    screen: SingleTable,
  },
});






class RootStack extends Component {
  render() {
    var text = this.props.text?this.props.text:'I\'m the MyComponent component'
    return (
      <NaviApp/>
    );
  }

  // _testAction = () => {
  //   this.props.testDispatch('test 成功了？')
  // }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent:'center',
    alignItems: 'center',
  },
  tabIcon:{
    width:20,
    height:20,
  }
});

//用来派发消息
const mapDispatchToProps = (dispatch,ownProps) => ({
  testDispatch: (...args) => dispatch(testAction(...args)),
});
//store 中存储的状态绑定到props上
const mapStateToProps = state => ({
  text: state.nav.text,
});

export default connect(mapStateToProps,mapDispatchToProps)(RootStack);
